import * as echarts from '../../ec-canvas/echarts'
const http = require('../../utils/http.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date: true,
    ec: {
      lazyLoad: true
    },
    resData: {}, //后端数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    http.postRequest('/mini/v1/work/daliy', {}, res => {
      // 周数据
      res.data.week = {};
      res.data.week.arr1 = [];
      res.data.week.arr2 = [];
      // 月数据
      res.data.month = {};
      res.data.month.arr1 = [];
      res.data.month.arr2 = [];
      // 支付方式
      res.data.pay = [];
      res.data.pay.push({value: res.data.pie_data.cash, name: '现金'});
      res.data.pay.push({value: res.data.pie_data.swiping_bank_card, name: '银行卡刷卡'});
      res.data.pay.push({value: res.data.pie_data.wechat_pay, name: '微信支付'});
      res.data.pay.push({value: res.data.pie_data.ali_pay, name: '支付宝支付'});
      res.data.pay.push({value: res.data.pie_data.bank_transfer, name: '银行转账'});
      res.data.pay.push({value: res.data.pie_data.other_pay, name: '其他支付'});
      res.data.pay.push({value: res.data.pie_data.store_charge_against, name: '储值卡冲销'});
      for (let i in res.data.week_number) {
        res.data.week.arr1.push(Number(res.data.week_number[i].number));
        res.data.week.arr2.push(Number(res.data.week_number[i].date) + '日');
      }
      for(let z in res.data.month_number) {
        res.data.month.arr1.push(Number(res.data.month_number[z].number));
        res.data.month.arr2.push(Number(res.data.month_number[z].date)+ '日');
      }
      this.setData({
        resData: res.data
      }, 600)
      this.init_echarts(res.data.week);
      this.init_echarts1(res.data.pay);
    })
  },
  //线图调用
  init_echarts(data) {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  // 线图配置
  getOption(data) {
    // 指定图表的配置项和数据
    var option = {
      title: {
        left: 'center'
      },
      grid: {
        y2: 20,
        x: 30,
        x2: 40,
        y: 20
      },
      color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.arr2,
        axisLabel: {
          textStyle: {
            color: '#259BFF',
            fontSize: '12',
          }
        },
        axisLine: {
          lineStyle: {
            color: '#259BFF',
            width: 2
          }
        }
      },
      axisLabel: {
        color: '#FF6F26',
        formatter: function (value, index) {
          var value;
          if (value >= 1000) {
            value = parseInt(Number(value) / 1000) + 'k';
          } else if (value < 1000) {
            value = value;
          }
          return value;
        }
      },
      yAxis: [{
        type: 'value',
        interval: Math.max(...data.arr1) / 5,
        max: Math.max(...data.arr1),
        min: 0,
        axisLine: {
          lineStyle: {
            color: '#FF6F26',
            fontSize: '12',
            width: 2
          }
        }
      }],
      dataZoom: [{
        type: 'inside',
        show: true,
        height: '15',
        bottom: '-20'
      },{
        height: '20',
      }],
      series: [{
        name: '营业额',
        type: 'line',
        smooth: true,
        data: data.arr1,
        lineStyle: {
          color: "#FF6F26",
          fontSize: '12',
          width: 2
        }
      }]
    }
    return option;
  },
  // 饼图
  init_echarts1(data) {
    this.echartsComponnet1.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.pieOption1(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  // 饼图配置
  pieOption1(data) {
    let options = {
      legend: {
        left: 10,
        top:20,
        data: ['现金', '银行卡刷卡', '微信支付', '支付宝', '银行卡转账','其他支付','储值卡冲销']
      },
      color: ['#e54d42', '#f37b1d', '#fbbd08','#8dc63f','#0081ff','#e03997','#a5673f'],
      series: [{
        type: 'pie',
        radius: '38%',
        center: ['45%', '50%'],
        data: data,
        selectedMode: 'single',
        animation: false,
        label: {
          formatter: "{b}{c}",
          position: 'outer',
          alignTo: 'none',
          bleedMargin: 5
        }
      }]
    }
    return options;
  },
  changeType(e) {
    let date = !this.data.date
    if(date) {
      this.init_echarts(this.data.resData.week);
    } else {
      this.init_echarts(this.data.resData.month);
    }
    this.setData({
      date: date
    })
  },
})